<template>
  <div class="box">
    <!-- 增加 -->
    <div class="head">
      <el-button icon="el-icon-plus" @click="open" type="primary"
        >新增</el-button
      >
    </div>
    <!-- 表格 -->
    <div class="tab">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="categoryName" label="分类名称" width="150">
          </el-table-column>
          <el-table-column prop="pic" label="图片" width="300">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="`http://admin.yami.byesame.com//apis/mall4j/img/${scope.row.pic}`"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="statuss" label="状态" width="310">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.statuss === '正常' ? 'primar' : 'danger'"
                >{{ scope.row.statuss }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="seq" label="排序号" width="310">
          </el-table-column>
          <el-table-column label="操作" width="310">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 模态框 -->
    <div class="mo">
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="图片分类" :label-width="formLabelWidth">
            <el-upload
              action="http://admin.yami.byesame.com/apis/admin/file/upload/element"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input v-model="form.categoryName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上级分类" :label-width="formLabelWidth">
            <el-cascader
              v-model="value"
              :options="options"
              :props="{ checkStrictly: true }"
              clearable
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="排序号" :label-width="formLabelWidth">
            <el-input-number
              v-model="num"
              controls-position="right"
              @change="handleChange"
              :min="1"
              :max="100"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-radio v-model="radio" label="0">下线</el-radio>
            <el-radio v-model="radio" label="1">正常</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="qd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 时间戳
      timestamp: Math.floor(Date.now() / 1000),
      // 添加图片
      dialogImageUrl: "",
      dialogVisible: false,
      // 计数器
      num: 1,
      // 表格
      tableData: [],
      // 单选
      radio: "1",
      // 模态框
      dialogFormVisible: true,
      form: {
        categoryName: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",

      // 练级选择器
      value: [],
      options: [
        {
          value: "yundong",
          label: "运动服饰",
        },
        {
          value: "meiwei",
          label: "美味零食",
        },
        {
          value: "shoji",
          label: "手机数码",
          children: [
            {
              value: "axure",
              label: "手机通讯",
            },
            {
              value: "sketch",
              label: "智能设备",
            },
            {
              value: "jiaohu",
              label: "珠宝钟表",
            },
          ],
        },
        {
          value: "meizhuang",
          label: "美妆护肤",
        },
      ],
    };
  },
  created() {
    this.MyList();
  },
  methods: {
    // 时间戳
    formattedDate() {
      this.timestamp = Math.floor(Date.now() / 1000);
    },
    // 表格信息
    MyList() {
      this.$http
        .get("http://admin.yami.byesame.com/apis/prod/category/table", {
          params: {
            t: this.timestamp,
          },
        })
        .then((res) => {
          console.log("表格信息", res);
          this.tableData = res.data;
          for (let i = 0; i < res.data.length; i++) {
            const item = res.data[i];
            if (item.status == 0) {
              item.statuss = "下线";
            } else {
              item.statuss = "正常";
            }
          }
        });
    },
    // 计数器
    handleChange(value) {
      console.log(value);
    },
    // 点击增加
    open() {
      this.dialogFormVisible = true;
    },
    // 练级选择器
    handleChange(value) {
      console.log(value);
    },
    // 编辑删除
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 添加图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 模态框确定
    qd() {
      //  this.$http
      //   .pots("http://admin.yami.byesame.com/apis/prod/category", {
      //     categoryName:'',
      //     grade:0,
      //     parentId:'',
      //     pic:'',
      //     seq:'',
      //     status:'',
      //     t: this.timestamp,
      //   })
      //   .then((res) => {
      //     console.log("模态框", res);
      //   });
      console.log(this.form.categoryName);
      
      this.dialogFormVisible = false;
    },
  },
};
</script>

<style scoped>
.el-button {
  padding: 9px 16px;
}
>>> .el-table .cell {
  text-align: center;
}
</style>